<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户维护</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<body>
		<div id="app">
			<el-table :data="tableData" border style="width: 100%" size="mini">
				<el-table-column prop="uname" label="用户名字" width="180">
				</el-table-column>
				<el-table-column label="用户密码" width="180">
					******
				</el-table-column>

				<el-table-column label="操作">
					<template slot="header" slot-scope="scope">
						<el-button type="primary" size="mini" @click="add">增加</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" @click="set(scope.row)">编辑</el-button>
						<el-button size="mini" @click="del(scope.row)">删除</el-button>
						<el-button type="warning" size="mini"
							@click="uprolemenu(scope.$index, scope.row)">角色菜单</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-drawer title="用户角色维护" :visible.sync="drawer" :with-header="true">
				&nbsp;
				<!-- <el-button type="primary" size="mini">确定修改角色菜单</el-button> -->
				当前用户角色{{nowuserId}}
				<br />
				<!-- {{userRolesList}} -->
				<template v-for="item in userRolesList">
					&nbsp;
					<el-button size="medium" type="primary" style="margin-bottom: 5px; margin-top: 5px;"
						@click="deleteUserRole(item.id)" plain>{{item.description}}
						<i class="el-icon-minus"></i> </el-tag>
				</template>
				<hr />
				<template v-for="item in roleList">
					&nbsp;
					<el-button size="medium" type="danger" style="margin-bottom: 10px;" @click="insertUserRole(item.id)"
						plain>{{item.description}}
						<i class="el-icon-plus"></i> </el-tag>
				</template>
				<!-- {{roleList}} -->
			</el-drawer>

			<!-- 新增 -->
			<el-dialog title="用户新增" :visible.sync="addbol" width="30%">
				<el-form :model="user" label-width="80px">
					<el-form-item label="用户id" style="display: none;">
						<el-input v-model="user.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="用户名字">
						<el-input v-model="user.uname"></el-input>
					</el-form-item>
					<el-form-item label="用户密码">
						<el-input v-model="user.upwd"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="addbol = false">取 消</el-button>
					<el-button type="primary" @click="insert">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 修改 -->
			<el-dialog title="用户修改" :visible.sync="setbol" width="30%">
				<el-form :model="user" label-width="80px">
					<el-form-item label="用户id" style="display: none;">
						<el-input v-model="user.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="用户名字">
						<el-input v-model="user.uname"></el-input>
					</el-form-item>
					<el-form-item label="用户密码">
						<el-input v-model="user.upwd"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="setbol = false">取 消</el-button>
					<el-button type="primary" @click="update">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				tableData: [],
				addbol: false,
				setbol: false,
				user: {
					id: '',
					uname: '',
					upwd: '',
				},
				drawer: false,
				nowuserId: 0,
				userRolesList: [], //当前用户拥有的角色集合
				roleList: [], //所有的角色集合
			},
			methods: {
				limi() {
					let that = this
					axios.get(API + "selectUser").
					then(function(res) {
						console.log(res)
						that.tableData = res.data.data.list
					}).catch(err => {
						console.log(err)
					});
				},
				cliker() {
					this.user = {
						id: '',
						uname: '',
						upwd: ''
					}
				},
				add() {
					this.cliker();
					this.addbol = !this.addbol;
				},
				set(row) {
					this.cliker();
					this.setbol = !this.setbol;
					this.user.id = row.id;
					this.user.uname = row.uname;
					this.user.upwd = row.upwd;
				},
				insert() {
					var that = this;
					axios.post(API + 'insertUser?name=' + this.user.uname + "&pwd=" + this.user.upwd).then(function(
						res) {
						console.log(res)
						that.$message({
							message: '新增成功',
							type: 'success'
						});
						that.addbol = false;
						that.limi();
					})
				},
				update() {
					var that = this;
					axios.post(API + "updateUser", {
						id: that.user.id,
						uname: that.user.uname,
						upwd: that.user.upwd
					}).then(function(res) {
						console.log(res)
						that.$message({
							message: '修改成功',
							type: 'success'
						});
						that.setbol = false;
						that.limi();
					})
				},
				del(row) {
					var that = this;
					// console.log(row.id);
					if (confirm("是否删除" + row.id)) {
						axios.get(API + "deleteUser/" + row.id).
						then(function(res) {
							console.log(res)
							that.$message({
								message: '删除成功',
								type: 'success'
							});
							that.limi();
						})
					}

				},
				uprolemenu(i, row) {
					var that = this
					this.nowuserId = row.id
					axios.get(API + "selectRoleByUserId/" + row.id).then(function(res) {
						console.log(res);
						that.userRolesList = res.data.data.rolelist
					});
					this.drawer = !this.drawer
				},
				allRole() { //获取所有角色集合
					let that = this
					axios.get(API + "selectAllRole").
					then(function(res) {
						console.log(res.data.data.list)
						that.roleList = res.data.data.list
					});
				},
				deleteUserRole(id) { //根据用户id删除一个角色
					var that = this;
					axios.post(API + "deleteByUseridAndRoleid", {
						userid: that.nowuserId,
						roleid: id
					}).
					then(function(res) {
						console.log(res)
						if (res.data.code == 200) {
							that.userRolesList = that.userRolesList.filter(function(obj) {
								return obj.id != id;
							})
							that.$message({
								message: '删除成功',
								type: 'success'
							});
						}
					});
					// alert(this.nowuserId+"==="+id)
				},
				insertUserRole(id) {
					var that = this;
					axios.post(API + "insertByUseridAndRoleid", {
						userid: that.nowuserId,
						roleid: id
					}).
					then(function(res) {
						console.log(res);
						that.$message({
							message: '新增成功',
							type: 'success'
						});
						var arr = that.uprolemenu(1,id);
						that.userRolesList = arr;
					});
				}

			},
			mounted() {
				//生命周期函数 挂载后执行
				this.limi(); //初始化获取树的数据
				this.allRole();
			}
		})
	</script>
</html>